<template>
  <div>
    <el-button @click="addBtn()">新增</el-button>
    <el-button v-if="selected!=0" @click="update()">修改</el-button>
    <el-button v-if="selected!=0" @click="del()">删除</el-button>
    <el-button v-if="selected!=0" @click="ck()">查看</el-button>
    <div><!-- 显示table的div -->
      <el-form :data="searchArgs" :inline="true"><!-- 查询条件表单 -->
        <el-form-item label="计划主题">
          <el-input v-model="searchArgs.planSubject" placeholder="请输入计划主题"></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="searchArgs.projectName" placeholder="请选择或输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="填报人">
          <el-input v-model="searchArgs.applyer" placeholder="请选择或输入填报人"></el-input>
        </el-form-item>
        <el-form-item label="起止日期">
          <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="searchArgs.sdate"></el-date-picker>--
          <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="searchArgs.edate"></el-date-picker>
        </el-form-item>
        <el-form-item label="审批状态">
          <el-select v-model="searchArgs.approveStatus">
            <el-option label="-" value=""></el-option>
            <el-option label="审批中" value="1"></el-option>
            <el-option label="审批不通过" value="2"></el-option>
            <el-option label="审批通过" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPlansList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="plans" style="width:100%">
        <el-table-column label="">
          <template slot-scope="scope">
            <el-radio v-model="selected" :label="scope.row.id">{{''}}</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="序号" prop="id"></el-table-column>
        <el-table-column label="计划主题" prop="planSubject"></el-table-column>
        <el-table-column label="项目名称" prop="proId"></el-table-column>
        <el-table-column label="编制人" prop="applyer"></el-table-column>
        <el-table-column label="日期" prop="date"></el-table-column>
        <el-table-column label="审批" prop="approveStatus" :formatter="approveFormat"></el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="updateDialog" width="50%">
      <el-form v-model="plan">
        <el-form-item label="计划名称">
          <el-input v-model="plan.planSubject"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="plan.date" type="date" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="plan.comment"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="updatePlan()"></el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="infoDialog" width="50%">
      <el-row>
        <el-col :span="6"><div class="borderDiv">所属项目</div></el-col>
        <el-col :span="6"><div class="borderDiv">{{plan.proId}}</div></el-col>
        <el-col :span="6"><div class="borderDiv">计划名称</div></el-col>
        <el-col :span="6"><div class="borderDiv">{{plan.planSubject}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><div class="borderDiv">填报人</div></el-col>
        <el-col :span="6"><div class="borderDiv">{{plan.applyer}}</div></el-col>
        <el-col :span="6"><div class="borderDiv">日期</div></el-col>
        <el-col :span="6"><div class="borderDiv">{{plan.date}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><div class="borderDiv">备注</div></el-col>
        <el-col :span="6"><div class="borderDiv">{{plan.comment}}</div></el-col>
        <el-col :span="6"><div class="borderDiv">审批状态</div></el-col>
        <el-col :span="6"><div class="borderDiv">{{plan.approveStatus}}</div></el-col>
      </el-row>
      
    </el-dialog>
  </div>  
</template>
<script>
import MaterialGPlansModel from "../../model/lyz/MaterialGPlansModel"
const MGPM=MaterialGPlansModel.getInstance();
export default{
  data(){
    return{
      plans:[],//计划信息
      searchArgs:{},//查询参数
      selected:0,//选择项
      plan:{},//单个plan
      details:[],//details
      updateDialog:false,//修改
      infoDialog:false,//信息
    }
  },
  created(){
    this.getPlansList();
  },
  methods:{
    getPlansList(){//查询计划信
      MGPM.getGPlansList(this.searchArgs).then((response)=>{
        console.log(response);
        this.plans=response.data.data});
    },
    approveFormat(row){//将审批状态转换成字符串
      if(row.approveStatus==1){
        return "审批中";
      }else if(row.approveStatus==2){
        return "审批不通过";
      }else if(row.approveStatus==3){
        return "审批通过"
      }
    },
    addBtn(){//点击新增按钮时 , 跳转路由到新增计划
      this.$router.push("/MaterialGPlans");
    },
    del(){
      MGPM.deletePlan(this.selected).then(()=>{this.getPlansList()})
    },
    update(){
      MGPM.getPlanById(this.selected).then((response)=>{this.plan=response.data.data})
      this.updateDialog=true;
    },
    ck(){
      MGPM.getPlanById(this.selected).then((response)=>{this.plan=response.data.data})
      MGPM.getDetailsByUseid(this.selected).then((response)=>{this.details=response.data.data})
      this.infoDialog=true;
    },
    updatePlan(){
      MGPM.updatePlan(this.plan).then(()=>{
        this.updateDialog=false;
        this.getPlansList();
      })
    }
  }
}
</script>
<style>
  .borderDiv{
    border: 1px solid black;
    padding: 10px;
    margin: 1px;
  }
</style>